<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { copyObjectSameTo } from '../../../../common/utils/normalUtils'

const emit = defineEmits(['save'])
const props = defineProps({
    result: {
        type: Object,
        default: function() {
            return {}
        }
    },
    showBtn: {
        type: Boolean,
        default: false
    }

})
/**
 * 页面状态
 */
const state = reactive({
    isLoading: false,
    computeVOList: [],
    makeCommission: 0,
    name: '',
    orderPayTimeEnd: '',
    orderPayTimeStart: '',
    makeDistributorCommission: 0, //	赚取分销商佣金
    makeSaleCommission: 0 //	赚取直销佣金
})

const saveImgHandler = () => {
    emit('save')
}

onMounted(() => {
    copyObjectSameTo(props.result, state)
})

</script>

<template>
  <div class="summary-box">
    <div class="s-row">
      <div class="item-box">
        <span>分销商名称：</span><span>{{ state.name }}</span>
      </div>
    </div>
    <div class="s-row">
      <div class="item-box-m">
        <span>赚取分销商佣金：</span>
        <span class="money-lb">
          {{ state.makeDistributorCommission }}
        </span>
      </div>
      <div class="item-box-m">
        <span>赚取直销佣金：</span>
        <span class="money-lb">
          {{ state.makeSaleCommission }}
        </span>
      </div>
      <div class="item-box-m">
        <span>赚取总计佣金：</span>
        <span class="money-lb">
          {{ state.makeCommission }}
        </span>
      </div>
    </div>
    <div class="s-row">
      <div class="item-box">
        <span>结算时间：</span><span>{{ state.orderPayTimeStart }} 至 {{ state.orderPayTimeEnd }}</span>
      </div>
    </div>

    <div class="save-box">
      <v-button v-if="showBtn"
                icon="tupian"
                type="primary"
                @click="saveImgHandler">
        保存图片
      </v-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.summary-box{
    @include ver-group();
    flex:none;
    width:100%;
    color:#999;
    font-size:14px;
    margin-bottom: 5px;
    background: #fff;
    position:relative;

  .save-box{
    position:absolute;
    right:0 ;
    top:0 ;
  }

    .s-row{
        @include hor-group();
        flex:none;
        width:100%;
        margin-bottom: 10px;
    }
    .s-row-r{
        @include hor-group(end);
        flex:auto;
        width:100%;
    }
    .item-box{
        @include hor-group();
        flex:none;
        margin-right: 15px;
        &>span:first-child{
            font-weight: bold;
        }
        &>span:last-child{
          font-weight: bold;
          color:#555;
        }
    }
    .item-box-m{
        @include hor-group();
        flex:none;
        margin-right: 15px;
        &>span:first-child{
            font-weight: bold;
        }
        &>span:last-child{
            color:#555;
            font-weight: bold;
        }
    }
    .item-box-r{
        @include hor-group(end);
        flex:auto;
        width:100%;
        &>span:first-child{
            font-weight: bold;
        }
        &>span:last-child{
            font-weight: bold;
            color:#555;
        }
    }
}
</style>
